<template>
  <div class="banners" v-if="banners">
    <div class="wrap">
      <van-swipe :autoplay="3000" :height="135">
        <van-swipe-item v-for="image in banners" :key="image.id">
          <img class="img" v-lazy="image.cover" />
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
export default {
  props: ["banners"],
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
.banners {
  padding: 13px;
  .wrap {
    width: 100%;
    height: 135px;
    border-radius: 15px;
    /deep/.van-swipe {
      .van-swipe-item {
        width: 100%;
        height: 100%;
        .img {
          width: 100%;
          height: 100%;
          // object-fit: fill;
        }
      }
    }
  }
}
</style>